<template>
    <div style="padding: 15px">
        <el-form ref="form" size="small" inline :model="form">
            <el-form-item label="SN码:" prop="chipID">
                <el-input
                    class="items"
                    type="text"
                    v-model="form.chipID"
                ></el-input>
            </el-form-item>
            <el-form-item label="设备类型:" prop="terminalType">
                <el-select
                    class="items"
                    v-model="form.terminalType"
                    filterable
                    @change="search"
                    placeholder="请选择"
                    size="small"
                >
                    <el-option
                        v-for="(item, index) in terminalTypeList"
                        :key="index"
                        :label="item.terminalTypeName"
                        :value="item.terminalType"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-button type="primary" size="small" @click="search"
                >查询</el-button
            >
        </el-form>
        <el-table
            v-loading="loading"
            :header-cell-style="headerCellStyle"
            :data="tableData"
            size="small"
            max-height="350px"
        >
            <el-table-column
                prop="companyCode"
                label="商家编码"
            ></el-table-column>
            <el-table-column
                prop="companyName"
                label="商家名称"
            ></el-table-column>
            <el-table-column prop="chipID" label="SN码"></el-table-column>

            <el-table-column
                prop="terminalTypeName"
                label="设备类型"
            ></el-table-column>
            <el-table-column
                prop="currentVersionCode"
                label="当前应用版本"
            ></el-table-column>
            <el-table-column
                prop="firmwareVersionCode"
                label="当前固件版本"
            ></el-table-column>
            <el-table-column fixed="right" align="center" label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="small"
                        type="primary"
                        @click="showUp(scope.row)"
                        >升级记录</el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <div style="width: 100%; padding: 15px" class="right">
            <el-pagination
                background
                :current-page.sync="currentPage"
                @current-change="handleCurrentChange"
                :page-size="pageSize"
                layout="prev, pager, next, total"
                :total="totalNum"
            ></el-pagination>
        </div>
        <upChange
            :value.sync="isShowUp"
            :currRow="row"
            @getList="getList"
        ></upChange>
    </div>
</template>

<script>
import upChange from './upChange'
export default {
    props: {
        value: Boolean,
        currRow: Object
    },
    components: {
        upChange
    },
    data () {
        return {
            row: {},
            currentPage: 1,
            pageSize: 10,
            totalNum: 0,
            isShowUp: false,
            loading: false,
            tableData: [],
            showValue: false,
            terminalTypeList: [],
            packageFileTypeList: [],
            form: {
                chipID: '',
                status: 2,
                terminalType: -1
            }
        }
    },
    watch: {
    },
    created () {
        this.getOnlyTerminalType()
        this.getList()
    },
    methods: {
        showUp (row) {
            this.row = row
            this.isShowUp = true
        },
        search () {
            this.currentPage = 1
            this.getList()
        },
        getOnlyTerminalType () {
            this.$http.get(this.$store.state.IP + '/system/company/getOnlyTerminalType?isAll=0',
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.terminalTypeList = response.data
                }
            }, response => {
            })
        },
        handleCurrentChange (page) {
            // 换页
            this.currentPage = page
            this.getList()
        },
        // 获取列表
        async getList () {
            this.loading = true
            const res = await this.$http.post(this.$store.state.IP + '/terminalDeviceManage/findTerminalPage', {
                companyCode: this.currRow.companyCode,
                managementType: this.currRow.managementType,
                page: this.currentPage - 1,
                size: 10,
                ...this.form
            })
            let response = res.data
            if (response.ret === '0') {
                this.loading = false
                this.tableData = response.res.list
                this.totalNum = response.res.total
            } else {
                this.loading = false
            }
        },
        // 清空数据
        clearData () {
            this.$refs['form'].resetFields()
            this.currentPage = 1
            this.showValue = false
            this.tableData = []
        }
    }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item
    width: 110px

.right
    text-align: right
</style>